<template>
    <div class="TaskWarp" :class="{teachDivMain:BeginTeaching}">
        <div class="divMain guilei" @click.stop>
            <div class="divTitle">
                <h2>{{Questions.child.QuestionRemark}}</h2>
            </div>
            <!--<div class="tigan" v-html="Questions.child.stem[0].StemContent"></div>-->
            <div class="divContent" style="background: #fff">

                <!--选项-->
                <ul class="options clearfix">
                    <draggable class="draggableContent clearfix optionsDraggable" :options="{group:'people'}">
                        <div style="display: inline-block" v-for="(item,index) in Questions.child.stem[0].opts">
                            <div class="draggable" v-for="val in JSON.parse(item.OptionContent)" v-html="val.Content"></div>
                        </div>
                    </draggable>
                </ul>

                <!--答题框-->
                <div class="continerWarp clearfix">
                    <ul v-for="(item,index) in Questions.child.stem[0].opts" class="continer" :style="background(item)">
                        <li class="continerTitle">
                            {{item.OptionNumber}}
                        </li>
                        <draggable class="draggableContent clearfix continerDraggable" :options="{group:'people'}">
                        </draggable>
                    </ul>
                </div>

            </div>
        </div>
        <div class="Close" v-show="!BeginTeaching">
            <i class="el-icon el-icon-close"></i>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import draggable from 'vuedraggable'
    import {mapGetters, mapActions} from 'vuex'
    export default {
        name: "DanXuan",
        props: ["Questions"],
        computed: mapGetters([
            'BeginTeaching'
        ]),
        methods: {
            background(item){
                var urlString = JSON.parse(item.OptionContent)[0]

                if (JSON.parse(item.OptionContent).length >= 0) {
                    if (urlString.src != '' || urlString.src != 'undefined') {
                        return 'background: #ccc url("' + picSrc + urlString.src + '") no-repeat;background-size: cover;'
                    }
                } else {
                    return 'background-color:red'
                }
            }
        },
        components: {
            draggable,
        },
        mounted() {
            $('.divContent').height(parseFloat($('.guilei').height()) - 80)
            window.onresize = function () {
                $('.divContent').height(parseFloat($('.guilei').height()) - 80)
            }
            $('.divContent img').each(function () {
                var _this = $(this)
                _this.upImgSrc()
            })
        },
        data () {
            return {}
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss">
    .guilei {
        .options {
            height: 30%;
            overflow: scroll;
            background-color: #fff;
            .draggableContent {
                min-height: 100%;
                min-width: 100%;
                display: inline-block;
                .draggable {
                    width: 100px;
                    height: 100px;
                    margin: 10px;
                    background: #fff;
                    border: 1px solid #000;
                    float: left;
                    p {
                        height: 100%;
                        width: 100%;
                        position: relative;
                        text-align: center;
                        font-size: 14px;
                        line-height: 20px;
                        img {
                            width: 80%;
                            height: 80%;
                            position: absolute;
                            left: 0;
                            right: 0;
                            top: 0;
                            bottom: 0;
                            margin: auto;
                        }
                    }
                }
            }
        }
        .continerWarp {
            height: 70%;
            overflow: scroll;
            background-color: #fff;
            .continer {
                width: 28%;
                margin: 1%;
                height: 60%;
                box-sizing: border-box;
                background: #ccc;
                float: left;
                overflow: scroll;
                .continerTitle {
                    text-align: center;
                    padding: 10px 0;
                    color: #FF7373;
                    font-size: 24px;
                    width: 80%;
                    margin: 0 auto;
                    border-bottom: 2px solid #FF7373;
                }
                .draggableContent {
                    min-height: 60%;
                    .draggable {
                        width: 100px;
                        height: 100px;
                        margin: 10px;
                        background: #fff;
                        border: 1px solid #000;
                        float: left;
                        p {
                            height: 100%;
                            width: 100%;
                            position: relative;
                            text-align: center;
                            font-size: 14px;
                            line-height: 20px;
                            img {
                                width: 80%;
                                height: 80%;
                                position: absolute;
                                left: 0;
                                right: 0;
                                top: 0;
                                bottom: 0;
                                margin: auto;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
    @import '../../../assets/css/public.scss';

    .TaskWarp {
        height: 90%;
        width: 90%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        .divMain {
            position: absolute;
            overflow: hidden;
            height: 100%;
            width: 100%;
            .divTitle {
                height: 80px;
                background: #fff;
                position: relative;
                box-shadow: 0 10px 20px 2px rgba(197, 208, 218, 0.8);
                h2 {
                    font-size: 20px;
                    line-height: 80px;
                    color: #56545A;
                }
            }
        }
    }
</style>